<template>
    <v-container
            class="fill-height bg"
            fluid
    >
        <v-row
                align="center"
                justify="center"
        >
            <v-col
                    cols="12"
                    sm="8"
                    md="4"
            >
                <v-card class="elevation-12">
                    <v-toolbar
                            color="white"
                            flat
                    >
                        <v-toolbar-title>
                            登录
                        </v-toolbar-title>
                        <v-spacer/>
                    </v-toolbar>
                    <v-card-text>
                        <v-form>
                            <v-text-field
                                    label="Account"
                                    name="account"
                                    prepend-icon="mdi-emoticon-happy"
                                    type="text"
                                    v-model="account"
                                    hint="至少输入2位"
                                    :rules="[rules.required]"
                                    placeholder="输入你的用户名"
                            />

                            <v-text-field
                                    id="password"
                                    label="Password"
                                    name="password"
                                    prepend-icon="mdi-lock"
                                    v-model="password"
                                    :type="visible ? 'text' : 'password'"
                                    :rules="[rules.required]"
                                    placeholder="输入你的密码"
                                    hint="至少输入6位"
                                    @click:append="visible = !visible"
                            />
                        </v-form>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer/>
                        <v-btn color="light-blue lighten-4">GO!</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
    import "@/assets/css/login/login.scss"

    export default {
        name: "login",
        components: {},
        props: {
            source: String,
        },
        data: () => ({
            account:"",//用户名
            password:"",//密码
            visible: false,//是否显示密码
            rules: {
                required: value => !!value || '什么都不输入就想进去吗！',
                min: v => v.length >= 6 || '最少六个字符',
                emailMatch: () => ('密码格式错误'),
            },
        }),
        methods: {}
    }
</script>

<style scoped>

</style>